import { defineComponent, onMounted, ref } from "vue";
import { useAxios } from "@vueuse/integrations";
import WeatherIcon from "./WeatherIcon"; // 引入天气图标组件

export default defineComponent({
  name: "WeatherItem",
  setup() {
    const city = ref("北京");
    const handleInput = (e: Event) => {
      return (city.value = e?.target?.value as string);
    };

    // 使用响应式数据获取天气信息
    const { data, isFinished } = useAxios(
      "http://t.weather.itboy.net/api/weather/city/101010100"
    );

    // 添加背景动画样式
    const backgroundClass = ref("bg-gradient-to-br from-blue-50 to-indigo-100");

    // 添加动画效果
    onMounted(() => {
      // 添加脉冲动画到天气图标
      const interval = setInterval(() => {
        backgroundClass.value = backgroundClass.value.includes("from-blue-50")
          ? "bg-gradient-to-br from-indigo-100 to-purple-50"
          : "bg-gradient-to-br from-blue-50 to-indigo-100";
      }, 5000);

      return () => clearInterval(interval);
    });

    return () => (
      // 添加动画背景和脉冲效果
      <div
        class={`${backgroundClass.value} rounded-2xl shadow-xl overflow-hidden transition-all duration-1000 ease-in-out transform hover:scale-[1.02]`}
      >
        <div class="p-6 relative">
          {/* 添加装饰性动画元素 */}
          <div class="absolute top-0 right-0 w-32 h-32 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div>
          <div class="absolute top-0 left-1/3 w-32 h-32 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div>
          <div class="absolute bottom-10 right-1/4 w-32 h-32 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div>

          <div class="relative z-10">
            <div class="flex justify-between items-center mb-6">
              <div>
                <h3 class="text-2xl font-bold text-gray-800">天气预报</h3>
                <p class="text-gray-600">
                  {isFinished.value ? data.value?.cityInfo?.city : "加载中..."}
                </p>
              </div>
              {/* 添加天气图标 */}
              <div class="flex flex-col items-center">
                {isFinished.value ? (
                  <div>
                    <WeatherIcon type={data.value?.data?.condition} size="lg" />
                    <div class="text-4xl font-bold text-gray-800 mt-2">
                      {isFinished.value ? data.value?.data?.wendu : "--"}°
                    </div>
                    <div class="text-gray-600">
                      {isFinished.value ? data.value?.data?.condition : ""}
                    </div>
                  </div>
                ) : (
                  <div class="w-16 h-16 bg-gray-200 rounded-full animate-pulse"></div>
                )}
              </div>
            </div>

            <div class="flex justify-between items-center py-4 border-t border-b border-gray-200">
              {/* 为每个指标添加图标 */}
              <div class="text-center flex flex-col items-center">
                <svg
                  class="w-6 h-6 text-blue-500 mb-1"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fill-rule="evenodd"
                    d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                    clip-rule="evenodd"
                  />
                </svg>
                <div class="text-gray-600 mb-1">湿度</div>
                <div class="text-lg font-semibold text-gray-800">
                  {isFinished.value ? data.value?.data?.shidu : "--"}
                </div>
              </div>

              <div class="text-center flex flex-col items-center">
                <svg
                  class="w-6 h-6 text-gray-500 mb-1"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fill-rule="evenodd"
                    d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
                    clip-rule="evenodd"
                  />
                </svg>
                <div class="text-gray-600 mb-1">风向</div>
                <div class="text-lg font-semibold text-gray-800">
                  {isFinished.value
                    ? data.value?.data?.forecast?.[0]?.fx
                    : "--"}
                </div>
              </div>

              <div class="text-center flex flex-col items-center">
                <svg
                  class="w-6 h-6 text-gray-500 mb-1"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fill-rule="evenodd"
                    d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l-1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
                    clip-rule="evenodd"
                  />
                </svg>
                <div class="text-gray-600 mb-1">风力</div>
                <div class="text-lg font-semibold text-gray-800">
                  {isFinished.value
                    ? data.value?.data?.forecast?.[0]?.fl
                    : "--"}
                </div>
              </div>

              <div class="text-center flex flex-col items-center">
                <svg
                  class="w-6 h-6 text-green-500 mb-1"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fill-rule="evenodd"
                    d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                    clip-rule="evenodd"
                  />
                </svg>
                <div class="text-gray-600 mb-1">空气质量</div>
                <div class="text-lg font-semibold text-gray-800">
                  {isFinished.value ? data.value?.data?.quality : "--"}
                </div>
              </div>
            </div>

            <div class="mt-6">
              <h4 class="font-semibold text-gray-800 mb-3">未来几天</h4>
              <div class="space-y-3">
                {isFinished.value ? (
                  data.value?.data?.forecast?.slice(1, 4).map((item: any) => (
                    <div class="flex justify-between items-center bg-white p-3 rounded-lg shadow-sm hover:bg-gray-50 transition-colors duration-200">
                      <div class="font-medium text-gray-800 flex items-center">
                        <svg
                          class="w-5 h-5 text-gray-500 mr-2"
                          fill="currentColor"
                          viewBox="0 0 20 20"
                        >
                          <path
                            fill-rule="evenodd"
                            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                            clip-rule="evenodd"
                          />
                        </svg>
                        {item.date}
                      </div>
                      <div class="flex items-center">
                        <WeatherIcon type={item.type} size="sm" />
                        <span class="text-gray-600 ml-2">{item.type}</span>
                      </div>
                      <div class="font-semibold text-gray-800">
                        {item.high} / {item.low}
                      </div>
                    </div>
                  ))
                ) : (
                  <div class="text-center py-4 text-gray-500">加载中...</div>
                )}
              </div>
            </div>

            <div class="mt-6 flex items-center gap-2">
              <label class="text-gray-700 font-medium">城市:</label>
              <input
                class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 hover:shadow-md"
                value={city.value}
                onInput={handleInput}
                placeholder="输入城市名称"
              />
            </div>
          </div>
        </div>

        {/* 添加CSS动画样式 */}
        <style type="text/css">{`
          @keyframes blob {
            0% {
              transform: translate(0px, 0px) scale(1);
            }
            33% {
              transform: translate(30px, -50px) scale(1.1);
            }
            66% {
              transform: translate(-20px, 20px) scale(0.9);
            }
            100% {
              transform: translate(0px, 0px) scale(1);
            }
          }
          .animate-blob {
            animation: blob 7s infinite;
          }
          .animation-delay-2000 {
            animation-delay: 2s;
          }
          .animation-delay-4000 {
            animation-delay: 4s;
          }
        `}</style>
      </div>
    );
  },
});
